<template>
  <div>
    <div class="head-name">积水点预测</div>
    <div class="hello">
      <!-- <img alt="logo" src="../assets/intro.png" style="width: 100%" /> -->
      <h4>请用户在下方选择需要预测的条数，最少5条，最多15条，默认条数为10条</h4>
      <el-input-number v-model="data.nums" @change="handleChange" :min="5" :max="15"
                       label="最少5条，最多15条，默认10条"></el-input-number>
      <el-button @click="submit()" class="showLine" style="margin-left: 10px">提交</el-button>
      <div class="box">
        <div class="chart">
          <div id="charts" ref="chart"></div>
        </div>
        <el-table
            :data="arrayData.arrData"
            :stripe="true"
            :border="true"
            fixed
        >
          <el-table-column
              type="index"
              label="积水点">
          </el-table-column>
          <el-table-column prop="lon" label="经度" sortable :formatter="formatLon">
          </el-table-column>
          <el-table-column prop="lat" label="纬度" sortable :formatter="formatLat">
          </el-table-column>
          <el-table-column prop="degree" label="程度" sortable :formatter="formatDegree">
          </el-table-column>
          <el-table-column prop="lasing" label="持续时间" sortable :formatter="formatLast">
          </el-table-column>
          <el-table-column prop="timestamp" label="降雨时间" sortable :formatter="formatTime">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {computed, onMounted, onUnmounted, reactive} from "vue";
import 'echarts-gl';
import 'echarts/map/js/world.js';
import geoJson from '../assets/dt.json';
import 'echarts-extension-amap';
import {water} from "../api";
import {mapGetters} from "vuex";
import { useStore } from 'vuex' // 引入useStore 方法


export default {
  name: "WaterPredict",
  setup() {
    const store = useStore()  // 该方法用于返回store 实例
    let myEcharts = echarts;
    let chart = null;
    let object = {
      user_id: store.state.userinfo.id,
      nums: 10
    }

    let data = reactive({
      nums: 10
    })
    let arrayData = reactive({
      arrData: []
    });
    onMounted(() => {
      initChart();
    });
    onUnmounted(() => {
      myEcharts.dispose;
      chart.dispose();
      chart = null;
    });

    async function initChart() {
      arrayData.arrData = await waterPredict()
      console.log("arr", arrayData.arrData);
      chart = myEcharts.init(document.getElementById("charts"), "purple-passion");
      // 注册可用的地图
      myEcharts.registerMap('guangzhou', geoJson);
      // 设置echarts的option
      chart.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
          alwaysShowContent: true,
          formatter: function (params) {
            return 'Value: ' + params.value[2];
          }
        },
        visualMap: {
          min: 0,
          max: 5,
          calculable: false,
          inRange: {
            color: ["blue", "blue", "yellow", "red"],
          },
          textStyle: {
            color: '#fff',
          },
        },
        geo: {
          map: 'guangzhou',
          roam: false,
          itemStyle: {
            areaColor: '#323c48',
            borderColor: '#111',
          },
          label: {
            show: true,
            color: '#fff',
          },
        },
        series: [
          {
            name: '积水点',
            type: 'heatmap',
            coordinateSystem: 'geo',
            legendHoverLink: true,//是否启用图例 hover(悬停) 时的联动高亮。
            hoverAnimation: true,//是否开启鼠标悬停节点的显示动画
            data: arrayData.arrData.map(({ID, lon, lat, degree, lasting}) => ({
              // name,
              value: [lon, lat, degree],
              // value:[0,60,100]
            })),
            z: 99999,
            pointSize: 10,
            blurSize: 11,
          },
        ],
      });
      window.onresize = function () {
        chart.resize();
      };
    }

    async function waterPredict() {
      let predResult = await water.getWaterPredict(object)
      console.log("waterNums:", predResult)
      let waterNums = predResult.data[0]
      console.log("waterNums:", waterNums)
      arrayData.arrData = waterNums
      return waterNums
    }

    function handleChange() {
      object.nums = data.nums
      console.log(data.nums)
    }

    async function submit() {
      arrayData.arrData = await waterPredict()
      await initChart()
    }

    function formatLon(row) {
      return row.lon.toFixed(3) + "°E"
    }

    function formatLat(row) {
      return row.lat.toFixed(3) + "°N"
    }

    function formatDegree(row) {
      switch (row.degree) {
        case 1:
          return "几乎没有积水"
        case 2:
          return "轻微积水"
        case 3:
          return "中等积水"
        case 4:
          return "积水比较严重"
        default :
          return "积水很严重"
      }
    }

    function formatLast(row) {
      switch (row.lasing) {
        case 1:
          return "0~1小时"
        case 2:
          return "1~3小时"
        case 3:
          return "4~6小时"
        case 4:
          return "6~12小时"
        default :
          return "12小时以上"
      }
    }

    return {
      data,
      handleChange,
      submit,
      arrayData,
      formatLon,
      formatLat,
      formatDegree,
      formatLast
    }
  }
}
</script>

<style scoped lang="scss">
.head-name {
  color: #b0e3ff;
  font-weight: bold;
  font-size: xx-large;
  padding: 50px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
}


@media screen and (min-width: 700px) {
  .chart {
    border: 3px double #c7e8ff;
    margin: 60px;
    width: 70%;
    height: 65vh;

    #charts {
      width: 100%;
      height: 65vh
    }
  }
}

@media screen and (max-width: 699px) {
  .chart {
    border: 3px double #c7e8ff;
    margin: 60px;
    width: 70%;
    height: 60vh;

    #charts {
      width: 100%;
      height: 55vh
    }
  }
}
</style>
